<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/api.js"></script>
    <script type="text/javascript" src="./script/doT.min.js"></script>
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <script type="text/javascript" src="./script/jquery-3.2.0.js"></script>
</head>
<body>
    <header class="aui-bar aui-bar-nav">
        <a class="aui-pull-left" tapmode onclick="closeWin()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">总资产</div>
    </header>
    <div class="aui-bar-nav-d"></div>

    <style>
        body{background:#fff;}
        @-webkit-keyframes load {
          0% {
            stroke-dashoffset: 0;
        }
    }
    @keyframes load {
      0% {
        stroke-dashoffset: 0;
    }
}
</style>
<div class="user-assets-t">
    <div class="progress" data-name="总资产（元）" data-percent="65600.86" id="total_money">
        <svg viewBox="-10 -10 220 220">
            <g fill="none" stroke-width="20" transform="translate(100,100)">
                <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"></path>
                <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"></path>
                <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"></path>
                <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"></path>
                <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"></path>
                <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"></path>
            </g>
        </svg>
        <svg viewBox="-10 -10 220 220">
            <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="315" id="percentCircle"></path>
        </svg>
        <i>已使用<span id="percent">50%</span></i>
    </div>
</div>

<ul class="user-assets-d">
   <li tapmode onclick="user_dqcc()">
       <i></i>
       当前持仓(元)
       <span id="load_wait_earnings">50000元</span>
   </li>
   <li>
       <i></i>
       可用余额(元)
       <span id="money">15600.86</span>
   </li> 
</ul>

<svg width="0" height="0">
    <defs>
        <lineargradient id="cl1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
            <stop stop-color="#70ad47"></stop>
            <stop offset="100%" stop-color="#70ad47"></stop>
        </lineargradient>
        <lineargradient id="cl2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
            <stop stop-color="#70ad47"></stop>
            <stop offset="100%" stop-color="#70ad47"></stop>
        </lineargradient>
        <lineargradient id="cl3" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
            <stop stop-color="#70ad47"></stop>
            <stop offset="100%" stop-color="#70ad47"></stop>
        </lineargradient>
        <lineargradient id="cl4" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
            <stop stop-color="#70ad47"></stop>
            <stop offset="100%" stop-color="#70ad47"></stop>
        </lineargradient>
        <lineargradient id="cl5" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
            <stop stop-color="#70ad47"></stop>
            <stop offset="100%" stop-color="#70ad47"></stop>
        </lineargradient>
        <lineargradient id="cl6" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
            <stop stop-color="#70ad47"></stop>
            <stop offset="100%" stop-color="#70ad47"></stop>
        </lineargradient>
    </defs>
</svg>

</body>
<script type="text/javascript">

    apiready = function(){
        // 总资产
        var total_money = api.pageParam.total_money;
        // 持仓
        var lock_money = api.pageParam.lock_money;
        // 可用余额
        var money = api.pageParam.money;
        // 占用比例
        var per_total = api.pageParam.per_total;

        $("#total_money").attr("data-percent",total_money)
        $('#load_wait_earnings').html(lock_money);
        $('#money').html(money);

        // // 已使用金额占总资产百分比
        // var percent =  Math.round((parseFloat(total_money) - parseFloat(money)) / parseFloat(total_money) * 10000) / 100.00 + "%";
        // 全圈630 * 百分比
        percentCircle =  parseFloat(630) * parseFloat(per_total)/100.00;

        $('#percentCircle').attr("stroke-dashoffset",percentCircle);

        $('#percent').html(per_total+'%');
    }

    function user_dqcc(){
        var delay = 0;
        if(api.systemType != 'ios'){
            // delay = 300;
        }
        api.openWin({
            name: 'loan_list',
            url: './loan-list.html',
            bounces: false,
            delay: delay,
            slidBackEnabled: true,
            vScrollBarEnabled: false,
            progress: {
                type: "page"
            },
            pageParam:{
                backUrl: 'assets'
            },
        });
    };
    function closeWin(){
        api.closeWin({
        });
    }
</script>
</html>